<template>
  <!-- 看板页面 -->
  <div class="board">
    <!-- 老师看板 -->
    <div class="teacher" v-if="teacher">
      <!-- 老师动态 -->
      <div class="dynamic">
        <div class="tit" style="font-size: 16px">
          <span style="margin-right: 20px"
            >动态({{
              boardList.bullLogVoList && boardList.bullLogVoList.length
            }})</span
          >
        </div>
        <div class="content" v-loading="loading">
          <div
            class="content2"
            v-if="boardList.bullLogVoList && boardList.bullLogVoList.length > 0"
          >
            <div class="scrollBox">
              <ul>
                <li
                  v-for="(item, index) in boardList.bullLogVoList"
                  :key="index"
                >
                  <div class="dynamicinfo">
                    <img class="imgBox" :src="item.url" alt="" />
                    <div class="contentInfo">
                      <div class="topinfo">
                        <div class="dynamicname dynamicname1">
                          {{ item.logName }}
                        </div>
                        <!-- <span v-if="item.needme" class="needme">
                          {{ item.needmeinfo }}
                        </span> -->
                        <span v-if="item.type === 1">
                          <span
                            v-show="item.projectStatus === 2"
                            class="ingstatus"
                            >进行中</span
                          >
                          <span
                            v-show="item.projectStatus === 1"
                            class="nonestatus"
                            >未开始</span
                          >
                          <span
                            v-show="item.projectStatus === 3"
                            class="completestatus"
                            >已完成</span
                          >
                        </span>
                        <span v-if="item.type === 2">
                          <span v-show="item.taskStatus === 3" class="ingstatus"
                            >进行中</span
                          >
                          <span
                            v-show="item.taskStatus === 1"
                            class="nonestatus"
                            >未开始</span
                          >
                          <span
                            v-show="item.taskStatus === 4"
                            class="completestatus"
                            >已完成</span
                          >
                        </span>
                        <span v-if="item.type === 3">
                          <span
                            v-show="item.weelyStatus === 3"
                            class="ingstatus"
                            >已审核</span
                          >
                          <span
                            v-show="item.weelyStatus === 1"
                            class="nonestatus"
                            >待提交</span
                          >
                          <span
                            v-show="item.weelyStatus === 2"
                            class="nonestatus"
                            >待审核</span
                          >
                          <span
                            v-show="item.weelyStatus === 4"
                            class="completestatus"
                            >审核未通过</span
                          >
                        </span>
                      </div>
                      <div v-if="item.type === 1" class="midTit">
                        项目：{{ item.projectName }}
                      </div>
                      <div v-if="item.type === 2" class="midTit">
                        任务：{{ item.taskName }}
                      </div>
                      <div v-if="item.type === 3" class="midTit">
                        周报：{{ item.weeklyName }}
                      </div>
                      <div class="bottomTime">
                        <span class="time">{{ item.createTime }}</span>
                        <span v-if="item.time !== 0" class="beforeTime"
                          >{{ item.time }}天前</span
                        >
                        <span v-else class="beforeTime">24小时内</span>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="content1" v-else-if="loading === false">暂无数据</div>
        </div>
      </div>

      <!-- 我的项目事项 -->
      <div class="mymission">
        <div class="tit" style="font-size: 16px">
          我的项目事项(<span>{{
            boardList.myProjectVoList &&
            boardList.myProjectVoList.records.length
          }}</span
          >)
        </div>
        <div v-loading="loading" class="content">
          <div
            v-if="
              boardList.myProjectVoList &&
              boardList.myProjectVoList.records.length > 0
            "
            class="scrollBox"
          >
            <ul class="liBox">
              <li
                v-for="(item, index) in boardList.myProjectVoList.records"
                :key="index"
                @click="projectGoIn(item.type, item.id)"
              >
                <div class="dynamicinfo">
                  <img :src="item.logo" alt="" />
                  <div class="contentInfo">
                    <div class="topinfo">
                      <div class="dynamicname">
                        <span class="nameBox">{{ item.name }}</span>
                        <span
                          class="misLV"
                          :class="{
                            LvOne: item.level <= 100,
                            LvTwo: (item.level <= 200) & (item.level > 100),
                            LvThree: item.level > 200,
                          }"
                          >LV {{ item.level }}</span
                        >
                      </div>
                      <span class="proBox">
                        <el-progress
                          type="circle"
                          :percentage="Number(item.progress)"
                          color="#2FC0E0"
                        ></el-progress>
                      </span>
                    </div>
                    <div v-if="item.type === 1" class="midTit">
                      瀑布协作项目
                    </div>
                    <div v-else class="midTit">敏捷项目</div>
                    <div class="bottomTime">
                      <span class="time">我是{{ item.role }}</span>
                      <span class="beforeTime" v-if="item.endDate !== null"
                        ><span>结束时间：</span>{{ item.endDate }}</span
                      >
                      <span class="beforeTime" v-else
                        ><span>结束时间：</span>未设置</span
                      >
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="content1" v-else-if="loading === false">暂无数据</div>
        </div>
      </div>

      <!-- 我的任务事项 -->
      <div class="myproject">
        <div class="tit" style="font-size: 16px">
          <!-- 我的任务事项(<span>{{
            boardList.myTaskVoList && boardList.myTaskVoList.length
          }}</span
          >) -->
          <a :class="isactive === 0 ? 'active' : ''" @click="handelchange()">
            我的任务事项
            <span
              >({{
                boardList.myTaskVoList && boardList.myTaskVoList.length
              }})</span
            >
          </a>
          <a :class="isactive === 1 ? 'active' : ''" @click="handelchange1()">
            需审核任务
            <span
              >({{
                boardList.needMyReviewVoList &&
                boardList.needMyReviewVoList.length
              }})</span
            >
          </a>
        </div>
        <div v-loading="loading" class="content">
          <div
            v-if="boardList.myTaskVoList && boardList.myTaskVoList.length > 0"
            class="scrollBox"
          >
            <ul class="liBox" v-show="isactive === 0">
              <li
                v-for="(item, index) in boardList.myTaskVoList"
                :key="index"
                @click="taskGoIn(item.id)"
              >
                <div class="dynamicinfo">
                  <div class="contentInfo" style="width: 100%; height: 100%">
                    <div class="topinfo">
                      <div class="dynamicname">
                        <span class="nameBox">{{ item.taskName }}</span>
                        <span
                          class="misLV"
                          :class="{
                            LvOne: item.priority <= 100,
                            LvTwo:
                              (item.priority <= 200) & (item.priority > 100),
                            LvThree: item.priority > 200,
                          }"
                          >LV {{ item.priority }}</span
                        >
                      </div>
                      <span v-show="item.status === 3" class="ingstatus"
                        >进行中</span
                      >
                      <span v-show="item.status === 1" class="nonestatus"
                        >未开始</span
                      >
                      <span v-show="item.status === 4" class="completestatus"
                        >已完成</span
                      >
                    </div>
                    <div class="bottomTime" style="bottom: -20px">
                      <span class="time" style="color: #111; font-size: 12px">{{
                        item.projectName
                      }}</span>
                      <span class="beforeTime" v-if="item.endTime !== null"
                        ><span>结束时间：</span>{{ item.endTime }}</span
                      >
                      <span class="beforeTime" v-else
                        ><span>结束时间：</span>未设置</span
                      >
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <ul class="liBox" v-show="isactive === 1">
              <li
                v-for="(item, index) in boardList.needMyReviewVoList"
                :key="index"
                @click="taskGoIn(item.id)"
              >
                <div class="dynamicinfo">
                  <div class="contentInfo" style="width: 100%; height: 100%">
                    <div class="topinfo">
                      <div class="dynamicname">
                        <span class="nameBox">{{ item.taskName }}</span>
                        <span
                          class="misLV"
                          :class="{
                            LvOne: item.priority <= 100,
                            LvTwo:
                              (item.priority <= 200) & (item.priority > 100),
                            LvThree: item.priority > 200,
                          }"
                          >LV {{ item.priority }}</span
                        >
                      </div>
                      <span v-show="item.status === 3" class="ingstatus"
                        >进行中</span
                      >
                      <span v-show="item.status === 1" class="nonestatus"
                        >未开始</span
                      >
                      <span v-show="item.status === 4" class="completestatus"
                        >已完成</span
                      >
                    </div>
                    <div class="bottomTime" style="bottom: -20px">
                      <span class="time" style="color: #111; font-size: 12px">{{
                        item.projectName
                      }}</span>
                      <span class="beforeTime" v-if="item.endTime !== null"
                        ><span>结束时间：</span>{{ item.endTime }}</span
                      >
                      <span class="beforeTime" v-else
                        ><span>结束时间：</span>未设置</span
                      >
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="content1" v-else-if="loading === false">暂无数据</div>
        </div>
      </div>
    </div>

    <!-- 学生看板 -->
    <div class="student" v-else>
      <!-- 动态 -->
      <div class="dynamic">
        <div class="tit" style="font-size: 16px">
          动态(<span>{{
            boardList.bullLogVoList && boardList.bullLogVoList.length
          }}</span
          >)
        </div>
        <div class="content" v-loading="loading">
          <div
            class="content2"
            v-if="boardList.bullLogVoList && boardList.bullLogVoList.length > 0"
          >
            <div class="scrollBox">
              <ul>
                <li
                  v-for="(item, index) in boardList.bullLogVoList"
                  :key="index"
                >
                  <div class="dynamicinfo">
                    <img class="imgBox" :src="item.url" alt="" />
                    <div class="contentInfo">
                      <div class="topinfo">
                        <div class="dynamicname dynamicname1">
                          {{ item.logName }}
                        </div>
                        <!-- <span v-if="item.needme" class="needme">
                        {{ item.needmeinfo }}
                      </span> -->
                        <span v-if="item.type === 1">
                          <span
                            v-show="item.projectStatus === 2"
                            class="ingstatus"
                            >进行中</span
                          >
                          <span
                            v-show="item.projectStatus === 1"
                            class="nonestatus"
                            >未开始</span
                          >
                          <span
                            v-show="item.projectStatus === 3"
                            class="completestatus"
                            >已完成</span
                          >
                        </span>
                        <span v-if="item.type === 2">
                          <span v-show="item.taskStatus === 3" class="ingstatus"
                            >进行中</span
                          >
                          <span
                            v-show="item.taskStatus === 1"
                            class="nonestatus"
                            >未开始</span
                          >
                          <span
                            v-show="item.taskStatus === 4"
                            class="completestatus"
                            >已完成</span
                          >
                        </span>
                        <span v-if="item.type === 3">
                          <span
                            v-show="item.weelyStatus === 3"
                            class="ingstatus"
                            >已审核</span
                          >
                          <span
                            v-show="item.weelyStatus === 1"
                            class="nonestatus"
                            >待提交</span
                          >
                          <span
                            v-show="item.weelyStatus === 2"
                            class="nonestatus"
                            >待审核</span
                          >
                          <span
                            v-show="item.weelyStatus === 4"
                            class="completestatus"
                            >审核未通过</span
                          >
                        </span>
                      </div>
                      <div v-if="item.type === 1" class="midTit">
                        项目：{{ item.projectName }}
                      </div>
                      <div v-if="item.type === 2" class="midTit">
                        任务：{{ item.taskName }}
                      </div>
                      <div v-if="item.type === 3" class="midTit">
                        周报：{{ item.weeklyName }}
                      </div>
                      <div class="bottomTime">
                        <span class="time" style="font-size: 12px">{{
                          item.createTime
                        }}</span>
                        <span v-if="item.time !== 0" class="beforeTime"
                          >{{ item.time }}天前</span
                        >
                        <span v-else class="beforeTime">24小时内</span>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="content1" v-else>暂无数据</div>
        </div>
      </div>
      <div class="rightContent">
        <!-- 图表 -->
        <div class="topSkill">
          <div class="tit">
            技能导航图
            <div class="choosefirst" v-if="selectScoreList.length > 1">
              <el-select
                v-model="scoreId"
                placeholder="请选择评分表"
                @change="scoreChange($event)"
              >
                <el-option
                  v-for="item in selectScoreList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <!-- <button class="check" @click="queryBtn">查询</button> -->
          </div>
          <div
            v-loading="loading"
            class="topContent"
            v-if="statusEacherList && statusEacherList.length > 0"
          >
            <div class="leftCon">
              <leftCon1
                v-if="statusEacherList[0].type === 1"
                :topEchartsData1.sync="statusEacherList[0].list"
              ></leftCon1>
              <midCon1
                v-if="
                  statusEacherList[0].type === 2 ||
                  statusEacherList[0].type === 4
                "
                :midEchartsData1.sync="statusEacherList[0].list"
              ></midCon1>
              <rightCon1
                v-if="statusEacherList[0].type === 3"
                :bottomEchartsData1.sync="statusEacherList[0].list"
              ></rightCon1>
              <p>{{ statusEacherList[0].title }}</p>
            </div>
            <span class="midLine"></span>
            <div class="midCon">
              <leftCon2
                v-if="statusEacherList[1].type === 1"
                :topEchartsData2.sync="statusEacherList[1].list"
              ></leftCon2>
              <midCon2
                v-if="
                  statusEacherList[1].type === 2 ||
                  statusEacherList[1].type === 4
                "
                :midEchartsData2.sync="statusEacherList[1].list"
              ></midCon2>
              <rightCon2
                v-if="statusEacherList[1].type === 3"
                :bottomEchartsData2.sync="statusEacherList[1].list"
              ></rightCon2>
              <p>{{ statusEacherList[1].title }}</p>
            </div>
            <span class="midLine"></span>
            <div class="rightCon">
              <leftCon3
                v-if="statusEacherList[2].type === 1"
                :topEchartsData3.sync="statusEacherList[2].list"
              ></leftCon3>
              <midCon3
                v-if="
                  statusEacherList[2].type === 2 ||
                  statusEacherList[2].type === 4
                "
                :midEchartsData3.sync="statusEacherList[2].list"
              ></midCon3>
              <rightCon3
                v-if="statusEacherList[2].type === 3"
                :bottomEchartsData3.sync="statusEacherList[2].list"
              ></rightCon3>
              <p>{{ statusEacherList[2].title }}</p>
            </div>
          </div>
          <div class="topContent1" v-else>暂无图表</div>
        </div>
        <div class="bottomBox">
          <!-- 我的项目事项 -->
          <div class="stuPro">
            <div class="tit" style="font-size: 16px">
              我的项目事项({{
                boardList.myProjectVoList &&
                boardList.myProjectVoList.records.length
              }})
            </div>
            <div v-loading="loading" class="content">
              <div
                v-if="
                  boardList.myProjectVoList &&
                  boardList.myProjectVoList.records.length > 0
                "
                class="scrollBox"
              >
                <ul>
                  <li
                    v-for="(item, index) in boardList.myProjectVoList.records"
                    :key="index"
                    @click="projectGoIn(item.type, item.id)"
                  >
                    <div class="dynamicinfo">
                      <img :src="item.logo" alt="" />
                      <div class="contentInfo">
                        <div class="topinfo">
                          <div class="dynamicname">
                            <span class="nameBox">{{ item.name }}</span>
                            <span
                              class="misLV"
                              :class="{
                                LvOne: item.level <= 100,
                                LvTwo: (item.level <= 200) & (item.level > 100),
                                LvThree: item.level > 200,
                              }"
                              >LV {{ item.level }}</span
                            >
                          </div>
                          <span class="proBox">
                            <el-progress
                              type="circle"
                              :percentage="Number(item.progress)"
                              color="#2FC0E0"
                            ></el-progress>
                          </span>
                        </div>
                        <div v-if="item.type === 1" class="midTit">
                          瀑布协作项目
                        </div>
                        <div v-else class="midTit">敏捷项目</div>
                        <div class="bottomTime">
                          <span class="time">我是{{ item.role }}</span>
                          <span class="beforeTime" v-if="item.endDate !== null"
                            ><span>结束时间：</span>{{ item.endDate }}</span
                          >
                          <span class="beforeTime" v-else
                            ><span>结束时间：</span>未设置</span
                          >
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="content1" v-else-if="loading === false">暂无数据</div>
            </div>
          </div>
          <!-- 我的任务事项 -->
          <div class="stuMis">
            <div class="tit" style="font-size: 16px">
              <!-- 我的任务事项({{
                boardList.myTaskVoList && boardList.myTaskVoList.length
              }}) -->
              <a
                :class="isactive === 0 ? 'active' : ''"
                @click="handelchange()"
              >
                我的任务事项
                <span
                  >({{
                    boardList.myTaskVoList && boardList.myTaskVoList.length
                  }})</span
                >
              </a>
              <a
                :class="isactive === 1 ? 'active' : ''"
                @click="handelchange1()"
              >
                需审核任务
                <span
                  >({{
                    boardList.needMyReviewVoList &&
                    boardList.needMyReviewVoList.length
                  }})</span
                >
              </a>
            </div>
            <div v-loading="loading" class="content">
              <div
                v-if="
                  boardList.myTaskVoList && boardList.myTaskVoList.length > 0
                "
                class="scrollBox"
              >
                <ul v-show="isactive === 0">
                  <li
                    v-for="(item, index) in boardList.myTaskVoList"
                    :key="index"
                    @click="taskGoIn(item.id)"
                  >
                    <div class="dynamicinfo">
                      <div
                        class="contentInfo"
                        style="width: 100%; height: 100%"
                      >
                        <div class="topinfo">
                          <div class="dynamicname" style="font-size: 14px">
                            <span class="nameBox">{{ item.taskName }}</span>
                            <span
                              class="misLV"
                              :class="{
                                LvOne: item.priority <= 100,
                                LvTwo:
                                  (item.priority <= 200) &
                                  (item.priority > 100),
                                LvThree: item.priority > 200,
                              }"
                              >LV {{ item.priority }}</span
                            >
                          </div>
                          <span v-show="item.status === 3" class="ingstatus"
                            >进行中</span
                          >
                          <span v-show="item.status === 1" class="nonestatus"
                            >未开始</span
                          >
                          <span
                            v-show="item.status === 4"
                            class="completestatus"
                            >已完成</span
                          >
                        </div>
                        <div class="bottomTime" style="bottom: -20px">
                          <span
                            class="time"
                            style="color: #333; font-size: 12px"
                            >{{ item.projectName }}</span
                          >
                          <span class="beforeTime" v-if="item.endTime !== null"
                            ><span>结束时间：</span>{{ item.endTime }}</span
                          >
                          <span class="beforeTime" v-else
                            ><span>结束时间：</span>未设置</span
                          >
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <ul v-show="isactive === 1">
                  <li
                    v-for="(item, index) in boardList.needMyReviewVoList"
                    :key="index"
                    @click="taskGoIn(item.id)"
                  >
                    <div class="dynamicinfo">
                      <div
                        class="contentInfo"
                        style="width: 100%; height: 100%"
                      >
                        <div class="topinfo">
                          <div class="dynamicname" style="font-size: 14px">
                            <span class="nameBox">{{ item.taskName }}</span>
                            <span
                              class="misLV"
                              :class="{
                                LvOne: item.priority <= 100,
                                LvTwo:
                                  (item.priority <= 200) &
                                  (item.priority > 100),
                                LvThree: item.priority > 200,
                              }"
                              >LV {{ item.priority }}</span
                            >
                          </div>
                          <span v-show="item.status === 3" class="ingstatus"
                            >进行中</span
                          >
                          <span v-show="item.status === 1" class="nonestatus"
                            >未开始</span
                          >
                          <span
                            v-show="item.status === 4"
                            class="completestatus"
                            >已完成</span
                          >
                        </div>
                        <div class="bottomTime" style="bottom: -20px">
                          <span
                            class="time"
                            style="color: #333; font-size: 12px"
                            >{{ item.projectName }}</span
                          >
                          <span class="beforeTime" v-if="item.endTime !== null"
                            ><span>结束时间：</span>{{ item.endTime }}</span
                          >
                          <span class="beforeTime" v-else
                            ><span>结束时间：</span>未设置</span
                          >
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="content1" v-else-if="loading === false">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftCon1 from '@/components/boardEcharts/top/topCon.vue';
import midCon1 from '@/components/boardEcharts/top/midCon.vue';
import rightCon1 from '@/components/boardEcharts/top/bottomCon.vue';
import leftCon2 from '@/components/boardEcharts/mid/topCon.vue';
import midCon2 from '@/components/boardEcharts/mid/midCon.vue';
import rightCon2 from '@/components/boardEcharts/mid/bottomCon.vue';
import leftCon3 from '@/components/boardEcharts/bottom/topCon.vue';
import midCon3 from '@/components/boardEcharts/bottom/midCon.vue';
import rightCon3 from '@/components/boardEcharts/bottom/bottomCon.vue';

import { getBoard, getSelectScore, getSelectScoreDetails } from '@/api/board/board.js';

export default {
  name: 'Board',
  components: {
    leftCon1,
    midCon1,
    rightCon1,
    leftCon2,
    midCon2,
    rightCon2,
    leftCon3,
    midCon3,
    rightCon3
  },
  data() {
    return {
      teacher: true,
      loading: true,
      page: { // 请求数据
        userId: parseInt(sessionStorage.getItem('userid')),
        userType: parseInt(sessionStorage.getItem('usertype')) // 1-系统管理员 2-学校管理员 3-老师 4-学生
      },
      // boardList: { // 看板数据
      //   bullLogVoList: [ // 动态
      //     {
      //       url: null, // 头像地址
      //       logId: 819, // 日志id
      //       logName: '标记完成了项目', // 日志名称
      //       type: 1, // 类型 1-项目 2-任务 3-周报
      //       businessId: 915, // 业务id
      //       createTime: '2022-05-01 15:26:49', // 时间
      //       taskName: null, // 任务名称
      //       taskStatus: null, // 任务状态
      //       weeklyName: null, // 周报名称
      //       weelyStatus: null, // 周报状态
      //       projectName: '1234  复制', // 项目名称
      //       projectStatus: 2, // 项目状态
      //       time: 3 // 距离当前时间
      //     }
      //   ],
      //   myTaskVoList: [ // 任务
      //     {
      //       id: 2, // 任务id
      //       priority: 22, // 等级
      //       taskName: '测试', // 任务名称
      //       projectName: '751', // 项目名称
      //       status: 3, // 状态 1-待开始 3-进行中 4-已完成
      //       endTime: '2022-04-26 00:00:00' // 结束时间
      //     }
      //   ],
      //   myProjectVoList: [ // 项目
      //     {
      //       projectId: 488, // 项目id
      //       projectName: '1234', // 项目名称
      //       type: 1, // 类型 1-瀑布协作项目 2-敏捷项目
      //       level: 11, // 等级
      //       endDate: '2022-03-14 00:00:00', // 结束时间
      //       roleName: null, // 角色名称
      //       progress: 0, // 百分比
      //       status: 0 // 状态 1-待开始 2-进行中 3-已完成
      //     }
      //   ]
      // },

      boardList: {}, // 看板数据
      statusEacherList: [], // 学生图表数据
      selectScoreList: [], // 评分表数据
      scoreId: null, // 评分表id

      // ---------------------------------------------------
      isactive: 0
    };
  },
  created() {
    this.getUserType();
    this.getBoard();
    this.getSelectScore();
  },
  methods: {
    // 时间格式化
    formatDate(date, fmt = 'yyyy-MM-dd') {
      if (!(date instanceof Array)) {
        date = new Date(date);
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (const k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          const str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
    // 判断登录人类型
    getUserType() {
      if (parseInt(sessionStorage.getItem('usertype')) === 4) {
        this.teacher = false;
      } else {
        this.teacher = true;
      }
    },
    // 获取评分表
    async getSelectScore() {
      const {data} = await getSelectScore(this.page);
      // console.log(data);
      this.selectScoreList = data;
      if (this.selectScoreList === null) {
        this.selectScoreList = [];
      }
      for (let i = 0; i < this.selectScoreList.length; i++) {
        if (this.selectScoreList[i] === null) {
          this.selectScoreList.splice(i, 1);
          i--;
        }
      }
      if (this.selectScoreList.length === 0) {
        this.scoreId = null;
      } else {
        this.scoreId = this.selectScoreList[0].id;
      }
    },
    // 看板数据请求
    async getBoard() {
      const res = await getBoard(this.page);
      // console.log(this.page);
      this.boardList = res.data;
      this.statusEacherList = res.data.graphicalList;
      // console.log(this.boardList);
      this.boardList.myTaskVoList.forEach(item => {
        if (item.endTime !== null) {
          item.endTime = this.formatDate(item.endTime);
        }
      });
      this.boardList.myProjectVoList.records.forEach(item => {
        if (item.endDate !== null) {
          item.endDate = this.formatDate(item.endDate);
        }
      });
      this.loading = false;
      // console.log(this.statusEacherList);
    },
    // 任务跳转
    taskGoIn(id) {
      this.$router.push({
        name: 'Misinfo&intro',
        params: {
          taskId: id,
          index: 0,
          currentView: 'info'
        }
      });
      localStorage.setItem('taskId', id);
    },
    // 项目跳转
    projectGoIn(type, id) {
      if (type === 1) {
        this.$router.push({
          name: 'Prodetail',
          params: {
            projectId: id,
            index: 0,
            currentView: 'survey'
          }
        });
        localStorage.setItem('projectId', id);
      } else {
        this.$router.push({
          name: 'Agileproject',
          params: {
            projectId: id,
            index: 0,
            currentView: 'survey'
          }
        });
        localStorage.setItem('projectId', id);
      }
    },
    // 评分表change事件
    async scoreChange(e) {
      // console.log(e);
      this.statusEacherList = null;
      let page = { // 搜索数据
        evaluationId: e, // 评分表id
        userId: parseInt(sessionStorage.getItem('userid')) // 当前点击人id
      };
      const {data} = await getSelectScoreDetails(page);
      // console.log(data);
      this.statusEacherList = data.graphicalList;
      // console.log(this.statusEacherList);
    },
    // 动态切换
    handelchange() {
      this.isactive = 0;
    },
    handelchange1() {
      this.isactive = 1;
    }
  }
};
</script>

<style lang="less" scoped>
.board {
  padding: 20px;
  width: calc(100% - 40px);
  .teacher {
    display: flex;
    justify-content: space-between;
    .dynamic,
    .mymission,
    .myproject {
      width: 32%;
      height: 85vh;
      box-shadow: 1px 1px 4px 0px #baccf7;
      border-radius: 10px;
      .tit {
        height: 55px;
        width: 100%;
        text-align: center;
        line-height: 55px;
        box-shadow: 0px 1px 2px 0px rgba(152, 152, 152, 0.5);
        border-radius: 10px 10px 0px 0px;
        color: #333;
        font-size: 16px;
        background: #f1f5ff;
        a {
          color: rgb(94, 94, 94);
          font-size: 14px;
          margin-right: 20px;
        }
        .active {
          color: #333;
          font-size: 18px;
          font-weight: bolder;
          position: relative;
          border-bottom: 7px solid transparent;
          border-image: linear-gradient(90deg, #1160cf 0%, #cd06bf 100%);
          border-image-slice: 1;
        }
      }
      .content {
        width: 100%;
        height: calc(100% - 75px);
        background: white;
        padding-top: 10px;
        .content2 {
          height: 100%;
        }
        .scrollBox {
          width: 98%;
          height: 100%;
          margin: 0 auto;
          overflow-y: auto;
          li {
            margin-bottom: 10px;
          }
          .liBox {
            li {
              // height: 98px;
              cursor: pointer;
              margin-bottom: 10px;
            }
          }
          .dynamicinfo {
            width: calc(100% - 40px);
            margin: 0 auto;
            padding: 2px 10px;
            padding-top: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #faf9ff;
            img {
              width: 55px;
              height: 55px;
              // border-radius: 50%;
              box-shadow: 1px 1px 4px 0px #baccf7;
            }
            .imgBox {
              border-radius: 50%;
            }
            .contentInfo {
              width: calc(100% - 75px);
              display: inline-block;
              position: relative;
              div {
                margin-bottom: 10px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                span {
                  display: inline-block;
                }
                .needme {
                  width: 120px;
                  height: 26px;
                  background: #bea5f3;
                  color: #fff;
                  text-align: center;
                  line-height: 26px;
                  border-radius: 13px;
                }
                // .ingstatus{
                //   color: #FFD167;
                // }
                // .ingstatus::before{
                //   content: '';
                //   display: inline-block;
                //   width: 10px;
                //   height: 10px;
                //   border-radius: 50%;
                //   background: #FFD167;
                // }
              }
              .topinfo {
                margin-bottom: 5px;
                // min-height: 22px;
                .dynamicname {
                  width: calc(100% - 80px);
                  min-height: 22px;
                  justify-content: start;
                  color: #333;
                  margin: 0;
                  font-size: 14px;
                  .nameBox {
                    display: inline-block;
                    font-size: 14px;
                    max-width: 268px;
                    height: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                  }
                  .misLV {
                    display: inline-block;
                    width: 65px;
                    height: 21px;
                    font-size: 12px;
                    font-family: SukhumvitSet-Bold;
                    color: #fff;
                    text-align: center;
                    line-height: 21px;
                    margin-left: 10px;
                    border-radius: 10px;
                  }
                  .LvOne {
                    background: #c5f5d1;
                  }
                  .LvTwo {
                    background: #f7cbd2;
                  }
                  .LvThree {
                    background: #cbd5f5;
                  }
                }
                .dynamicname1 {
                  min-height: 22px;
                }
              }
              .proBox {
                width: 50px;
                height: 50px;
                position: absolute;
                right: 0;
              }
              .midTit {
                color: #555;
                font-size: 14px;
                margin-bottom: 3px;
              }
              .bottomTime {
                // position: relative;
                .time {
                  color: #333;
                  font-size: 12px;
                }
                .time::before {
                  position: relative;
                  bottom: -3px;
                  content: "";
                  display: inline-block;
                  width: 5px;
                  height: 20px;
                  background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%);
                  border-radius: 3px;
                  margin-right: 5px;
                }
                .beforeTime {
                  color: #555;
                  font-size: 14px;
                }
              }
            }
          }
          .dynamicinfo:hover {
            box-shadow: 2px 2px 2px rgba(197, 190, 234, 1);
          }
        }
      }
      .content1 {
        font-size: 16px;
        color: #333;
        line-height: 80px;
        text-align: center;
      }
    }
  }
  .student {
    display: flex;
    justify-content: space-between;
    .dynamic {
      width: 30%;
      height: 85vh;
      box-shadow: 1px 1px 4px 0px #baccf7;
      border-radius: 10px;
      .tit {
        height: 55px;
        width: 100%;
        text-align: center;
        line-height: 55px;
        box-shadow: 0px 1px 2px 0px rgba(152, 152, 152, 0.5);
        border-radius: 10px 10px 0px 0px;
        color: #333;
        background: #f1f5ff;
      }
      .content {
        width: 100%;
        height: calc(100% - 75px);
        background: white;
        padding-top: 10px;
        .content2 {
          height: 100%;
        }
        .scrollBox {
          width: 98%;
          height: 100%;
          margin: 0 auto;
          overflow-y: auto;
          li {
            margin-bottom: 10px;
          }
          .dynamicinfo {
            width: calc(100% - 40px);
            margin: 0 auto;
            padding: 2px 10px;
            padding-top: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #faf9ff;
            // margin-bottom: 20px;
            img {
              width: 55px;
              height: 55px;
              border-radius: 50%;
              box-shadow: 1px 1px 4px 0px #baccf7;
            }
            .contentInfo {
              width: calc(100% - 75px);
              display: inline-block;
              position: relative;
              div {
                margin-bottom: 10px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                span {
                  display: inline-block;
                }
                .needme {
                  width: 120px;
                  height: 26px;
                  background: #bea5f3;
                  color: #fff;
                  text-align: center;
                  line-height: 26px;
                  border-radius: 13px;
                }
              }
              .topinfo {
                margin-bottom: 5px;
                // height: 22px;
                .dynamicname {
                  width: calc(100% - 80px);
                  min-height: 22px;
                  justify-content: start;
                  color: #333;
                  margin: 0;
                  font-size: 14px;
                  .nameBox {
                    display: inline-block;
                    font-size: 14px;
                    max-width: 268px;
                    height: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                  }
                  .misLV {
                    display: inline-block;
                    width: 65px;
                    height: 21px;
                    font-size: 12px;
                    font-family: SukhumvitSet-Bold;
                    color: #fff;
                    text-align: center;
                    line-height: 21px;
                    margin-left: 10px;
                    border-radius: 10px;
                  }
                  .LvOne {
                    background: #c5f5d1;
                  }
                  .LvTwo {
                    background: #f7cbd2;
                  }
                  .LvThree {
                    background: #cbd5f5;
                  }
                }
                .dynamicname1 {
                  min-height: 22px;
                }
              }
              .midTit {
                color: #555;
                font-size: 14px;
                margin-bottom: 3px;
              }
              .bottomTime {
                position: relative;
                .time {
                  color: #333;
                  display: inline-block;
                }
                .time::before {
                  position: relative;
                  bottom: -3px;
                  content: "";
                  display: inline-block;
                  width: 5px;
                  height: 20px;
                  background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%);
                  border-radius: 3px;
                  margin-right: 5px;
                }
                .beforeTime {
                  color: #555;
                  font-size: 14px;
                }
              }
            }
          }
          .dynamicinfo:hover {
            box-shadow: 2px 2px 2px rgba(197, 190, 234, 1);
          }
        }
      }
      .content1 {
        font-size: 16px;
        color: #333;
        line-height: 80px;
        text-align: center;
      }
    }
    .rightContent {
      width: 68%;
      height: 85vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .topSkill {
        width: 100%;
        height: 49%;
        box-shadow: 1px 1px 4px 0px #baccf7;
        border-radius: 11px;
        .tit {
          position: relative;
          height: 55px;
          width: 100%;
          text-align: center;
          line-height: 55px;
          box-shadow: 0px 1px 2px 0px rgba(152, 152, 152, 0.5);
          border-radius: 10px 10px 0px 0px;
          color: #222;
          font-size: 16px;
          background: #f1f5ff;
          .choosefirst {
            position: absolute;
            top: 0;
            right: 20px;
          }
        }
        .topContent {
          height: calc(100% - 65px);
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .leftCon,
          .midCon,
          .rightCon {
            width: 32%;
            height: 100%;
            text-align: center;
            // #leftEcharts {
            // /deep/ div {
            //   width: 100% !important;
            //   height: 100% !important;
            // }
            // }
            // /deep/ canvas {
            //   width: 100% !important;
            //   height: 100% !important;
            // }
            p {
              margin: 0 auto;
              color: #111;
              font-size: 14px;
            }
          }
          .midLine {
            height: 70%;
            border-left: 1px solid #eef3ff;
          }
          .rightCon {
            position: relative;
            .outCircle {
              position: absolute;
              top: 16%;
              left: 25%;
              display: inline-block;
              width: 200px;
              height: 200px;
              border: 3px solid #2fc0e0;
              border-radius: 50%;
            }
          }
        }
        .topContent1 {
          font-size: 16px;
          color: #333;
          line-height: 80px;
          text-align: center;
        }
      }
      .bottomBox {
        width: 100%;
        height: 49%;
        display: flex;
        justify-content: space-between;
        .stuPro,
        .stuMis {
          width: 49%;
          height: 100%;
          box-shadow: 1px 1px 4px 0px #baccf7;
          border-radius: 11px;
          .tit {
            height: 55px;
            width: 100%;
            text-align: center;
            line-height: 55px;
            box-shadow: 0px 1px 2px 0px rgba(152, 152, 152, 0.5);
            border-radius: 10px 10px 0px 0px;
            color: #222;
            background: #f1f5ff;
            a {
              color: rgb(94, 94, 94);
              font-size: 14px;
              margin-right: 20px;
            }
            .active {
              color: #333;
              font-size: 18px;
              font-weight: bolder;
              position: relative;
              border-bottom: 7px solid transparent;
              border-image: linear-gradient(90deg, #1160cf 0%, #cd06bf 100%);
              border-image-slice: 1;
            }
          }
          .content {
            width: 100%;
            height: calc(100% - 75px);
            background: white;
            padding-top: 10px;
            .content2 {
              height: 100%;
            }
            .content1 {
              font-size: 16px;
              color: #333;
              line-height: 80px;
              text-align: center;
            }
            .scrollBox {
              width: 98%;
              height: 100%;
              margin: 0 auto;
              overflow-y: auto;
              li {
                cursor: pointer;
              }
              .dynamicinfo {
                width: calc(100% - 40px);
                margin: 0 auto;
                padding: 2px 10px;
                padding-top: 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #faf9ff;
                margin-bottom: 20px;
                img {
                  width: 55px;
                  height: 55px;
                  // border-radius: 50%;
                  box-shadow: 1px 1px 4px 0px #baccf7;
                }
                .contentInfo {
                  width: calc(100% - 75px);
                  display: inline-block;
                  position: relative;
                  div {
                    margin-bottom: 10px;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    span {
                      display: inline-block;
                    }
                    .needme {
                      width: 120px;
                      height: 26px;
                      background: #bea5f3;
                      color: #fff;
                      text-align: center;
                      line-height: 26px;
                      border-radius: 13px;
                    }
                    .ingstatus {
                      font-size: 12px;
                      color: #ffd167;
                    }
                    .ingstatus::before {
                      content: "";
                      display: inline-block;
                      width: 10px;
                      height: 10px;
                      border-radius: 50%;
                      background: #ffd167;
                    }
                  }
                  .topinfo {
                    position: relative;
                    margin-bottom: 5px;
                    .dynamicname {
                      width: calc(100% - 80px);
                      height: 22px;
                      justify-content: start;
                      color: #333;
                      margin: 0;
                      font-size: 14px;
                      .nameBox {
                        display: inline-block;
                        font-size: 14px;
                        max-width: 268px;
                        height: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        -o-text-overflow: ellipsis;
                      }
                      .misLV {
                        display: inline-block;
                        width: 65px;
                        height: 21px;
                        font-size: 12px;
                        font-family: SukhumvitSet-Bold;
                        color: #fff;
                        text-align: center;
                        line-height: 21px;
                        margin-left: 10px;
                        border-radius: 10px;
                      }
                      .LvOne {
                        background: #c5f5d1;
                      }
                      .LvTwo {
                        background: #f7cbd2;
                      }
                      .LvThree {
                        background: #cbd5f5;
                      }
                    }
                    .proBox {
                      width: 50px;
                      height: 50px;
                      position: absolute;
                      right: 0;
                    }
                  }
                  .midTit {
                    color: #555;
                    font-size: 14px;
                    margin-bottom: 3px;
                  }
                  .bottomTime {
                    // position: relative;
                    .time {
                      color: #333;
                      font-size: 12px;
                    }
                    .time::before {
                      position: relative;
                      bottom: -3px;
                      content: "";
                      display: inline-block;
                      width: 5px;
                      height: 20px;
                      background: linear-gradient(
                        180deg,
                        #1160cf 0%,
                        #cd06bf 100%
                      );
                      border-radius: 3px;
                      margin-right: 5px;
                    }
                    .beforeTime {
                      color: #555;
                      font-size: 14px;
                    }
                  }
                }
              }
              .dynamicinfo:hover {
                box-shadow: 2px 2px 2px rgba(197, 190, 234, 1);
              }
            }
          }
        }
      }
    }
  }
  .ingstatus {
    font-size: 12px;
    color: #ffd167;
  }
  .ingstatus::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 3px;
    background: #ffd167;
    box-shadow: 0 0 3px #ffd167;
  }
  .nonestatus {
    font-size: 12px;
    color: #555;
  }
  .nonestatus::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #555;
    margin-right: 3px;
    box-shadow: 0 0 3px #555;
  }
  .completestatus {
    font-size: 12px;
    color: #3ea528;
  }
  .completestatus::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3ea528;
    margin-right: 3px;
    box-shadow: 0 0 3px #3ea528;
  }
  /deep/.el-progress--circle {
    height: 100%;
    svg path:first-child {
      stroke: #e8f8fb;
    }
    svg path:last-child {
      stroke-width: 5;
    }
  }
}
</style>
